<template>
    <div class="device-dialog">
        <!-- 搜索区域 -->
        <div class="conditions">
            <el-input
                v-model="numberOrName"
                size="small"
                class="filter-input"
                clearable
                placeholder="请输入设备桩号或名称，Enter键快速查找"
                @keyup.enter.native="handleFilter"
            >
                <el-button slot="append" icon="el-icon-search" @click="handleFilter" />
            </el-input>
        </div>

        <!--数据列表区-->
        <BaseTable
            ref="table"
            v-loading="loading"
            :columns="columns"
            :data="list"
            height="480px"
            row-key="number"
            highlight-current-row
            @selection-change="handleSelectionChange"
        >
            <template #type="{ scope: { row } }">
                <span>{{ row.deviceTypeName }}</span>
            </template>
            <template #status="{ scope: { row } }">
                <span>{{ deviceStatus[row.sta] }}</span>
            </template>
        </BaseTable>

        <!--分页组件-->
        <Pagination
            class="pagination"
            :current-page.sync="page.pageNo"
            :page-size.sync="page.pageSize"
            :total="page.total"
            @current-change="getList"
            @size-change="getList"
        />

        <div class="buttons">
            <BaseButton type="second" @click="handleCancel">取 消</BaseButton>
            <BaseButton :disabled="selectedList.length === 0" @click="handleAdd">添 加</BaseButton>
        </div>
    </div>
</template>

<script>
import BasePage from '@/layouts/BasePage'
import { JdywDeviceModel } from '@/models'

export default {
    name: 'DeviceDialog',
    components: {
        BasePage
    },
    props: {
        deviceList: {
            type: Array,
            default: () => []
        },
        params: {
            type: Object,
            default: () => ({})
        },
        visible: {
            type: Boolean,
            default: false
        },
        highwayCode: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            model: new JdywDeviceModel(),
            deviceStatus: {
                1: '未启用',
                2: '离线',
                3: '在线',
                4: '未检测',
                5: '运维中',
                6: '已报废',
                7: '使用中'
            },
            numberOrName: null,
            loading: true,
            list: [],
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            columns: Object.freeze([
                {
                    attrs: {
                        type: 'selection',
                        'reserve-selection': true
                    }
                },
                {
                    attrs: {
                        prop: 'stake',
                        label: '设备桩号',
                        'show-overflow-tooltip': true,
                        'min-width': '120'
                    }
                },
                {
                    attrs: {
                        prop: 'name',
                        label: '设备名称',
                        'min-width': '140',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    slot: 'type',
                    attrs: {
                        prop: 'type',
                        label: '设备类型',
                        'min-width': '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'belongPlace',
                        label: '所属位置',
                        'min-width': '140',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    slot: 'status',
                    attrs: {
                        prop: 'sta',
                        label: '设备状态',
                        width: '120'
                    }
                }
            ]),
            selectedList: [],
            stringParams: JSON.stringify(this.params)
        }
    },
    watch: {
        visible(val) {
            if (val) {
                // 清除当前的表格选中项
                this.$refs.table.$refs.table.clearSelection()
                this.handleFilter()
            }
        },
        stringParams() {
            this.handleFilter()
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.loading = true
            this.model
                .getList({ numberOrName: this.numberOrName, usable: true, ...this.params }, this.page)
                .then((res) => {
                    this.list = res.list || []
                    this.page.total = res.totalCount || 0

                    this.$nextTick(() => {
                        this.list.forEach((item) => {
                            this.deviceList.some((m) => {
                                if (item.id === m.id) {
                                    console.log(99666)
                                    this.$refs['table'].$refs['table'].toggleRowSelection(item)
                                    return true
                                }
                            })
                        })
                    })
                })
                .finally(() => {
                    this.loading = false
                })
        },
        // 查询
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        },
        handleCancel() {
            this.$emit('close')
        },
        handleSelectionChange(val) {
            this.selectedList = val
        },
        handleAdd() {
            const list = this.selectedList.map((item) => {
                return {
                    id: item.id,
                    name: item.name,
                    number: item.number,
                    stake: item.stake,
                    deviceTypeName: item.deviceTypeName,
                    deviceTypeId: item.deviceTypeId,
                    belongPlace: item.belongPlace,
                    lngLat: `${item.lng},${item.lat}`
                }
            })
            this.$emit('get-list', list)
            this.$emit('close')
        }
    }
}
</script>

<style lang="scss" scoped>
.device-dialog {
    .conditions {
        display: flex;
        justify-content: flex-end;
        .filter-input {
            width: 360px;
            margin-bottom: 16px;
        }
    }
    .pagination {
        margin: 16px 0;
    }
    .buttons {
        text-align: right;
    }
}
</style>
